<template>
    <a-modal v-model:visible="visible" title="得分" width="550px" @ok="Send">
        <a-form :model="formState" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-form-item label="规范性" name="inspectA">
                <a-rate v-model:value="formState.inspectA" />
            </a-form-item>
            <a-form-item label="严谨性" name="inspectB">
                <a-rate v-model:value="formState.inspectB" />
            </a-form-item>
            <a-form-item label="复用性" name="inspectC">
                <a-rate v-model:value="formState.inspectC" />
            </a-form-item>
            <a-form-item label="还原度" name="inspectD">
                <a-rate v-model:value="formState.inspectD" />
            </a-form-item>
            <a-form-item label="整洁度" name="inspectE">
                <a-rate v-model:value="formState.inspectE" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script lang="ts" setup>
import { reactive, ref, watch } from 'vue';
import Admin from '@/apis/admin'
import { notification } from 'ant-design-vue'

const props = defineProps({
    show: Boolean,
    Status: {
        type: Object,
        default: () => { return {} }
    }
})

const visible = ref<boolean>(false);
const emit = defineEmits(['update:show', 'SetValue']);

watch(() => props.show, (val) => {
    visible.value = val
}, { immediate: true })

watch(visible, (val) => {
    emit('update:show', val)
})

interface FormState {
    id: string;
    inspectA: number;
    inspectB: number;
    inspectC: number;
    inspectD: number;
    inspectE: number;
    total: number;
}
const formState = reactive<FormState>({
    id: '',
    inspectA: 0,
    inspectB: 0,
    inspectC: 0,
    inspectD: 0,
    inspectE: 0,
    total: 0,
});


formState.id = props.Status.id;
formState.inspectA = props.Status.inspectA;
formState.inspectB = props.Status.inspectB;
formState.inspectC = props.Status.inspectC;
formState.inspectD = props.Status.inspectD;
formState.inspectE = props.Status.inspectE;

const Send = () => {
    formState.total = Math.round((formState.inspectA + formState.inspectB + formState.inspectC + formState.inspectD + formState.inspectE) / 5 * 10) / 10;
    Admin.SetInspectTotal(formState).then((res: any) => {
        notification.success(res);
        visible.value = false;
        emit('SetValue', formState);
    });
}


</script>


<style scoped lang="less">
.ant-rate {
    color: #f60;
}
</style>